<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>专题活动</title>
</head>
<link rel="stylesheet" href="../../static/layeropen.css">
<link rel="stylesheet" href="../../static/layui_ext/dtree/dtree.css">
<link rel="stylesheet" href="../../static/layui_ext/dtree/font/dtreefont.css">
<script src="../../static/global.js"></script>
<script src="../../static/layui_ext/dtree/dtree.js"></script>
<body>
<!--搜索条件区域-->
<form style="margin-top: 20px" class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">优惠卷名字</label>
            <div class="layui-input-block">
                <input type="text" id="promotion_name" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="promotionSusuo" lay-filter="promotionSusuo">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</form>

<!--头部工具栏-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete">批量删除</button>
    </div>
</script>
<!--渲染秒杀活动表格-->
<table class="layui-hide" id="promotiondemo" lay-filter="promotiontest"></table>
<!--表格switch按钮-->
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" id="status" value="{{d.id}}" lay-skin="switch"
           lay-text="ON|OFF" lay-filter="switch_show_status" {{ d.status == 1 ? 'checked' : '' }}>
</script>
<!--侧边栏显示信息-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--秒杀活动添加-->
<div style="display: none;margin-left: 40px;margin-top: 30px" id="promotion_add_div">
    <form class="layui-form layui-form-pane" id="promotion_add_form" lay-filter="promotion_add_form">
        <div class="layui-form-item">
            <label class="layui-form-label">活动标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="请输入活动标题" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="start_time" autocomplete="off" id="start_time_add" lay-verify="required" placeholder="请输入开始时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="end_time" autocomplete="off" id="end_time_add" lay-verify="required" placeholder="请输入结束时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked=""  id="" name="status" lay-skin="switch"
                       lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="create_time" autocomplete="off" id="create_time_add" lay-verify="required" placeholder="请输入创建时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-inline">
                <input type="text" name="user_id" autocomplete="off" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="promotion_add" lay-filter="promotion_add">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<!--秒杀活动修改弹框-->
<div style="display: none;margin-left: 40px;margin-top: 30px" id="promotion_up_div">
    <form class="layui-form layui-form-pane" id="promotion_up_form" lay-filter="promotion_up_form">
        <div class="layui-form-item">
            <label class="layui-form-label">活动标题</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="required" placeholder="请输入活动标题" autocomplete="off" class="layui-input">
                <input type="text" name="id" class="layui-input layui-hide">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-inline">
                <input type="text" name="start_time" id="start_time_up" lay-verify="required" autocomplete="off" placeholder="请输入开始时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-inline">
                <input type="text" name="end_time" id="end_time_up" lay-verify="required" autocomplete="off" placeholder="请输入结束时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">显示状态</label>
            <div class="layui-input-inline">
                <input type="checkbox" checked="" id="status_up" name="status" lay-skin="switch"
                       lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="text" name="create_time" id="create_time_up" autocomplete="off" lay-verify="required" placeholder="请输入创建时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建人</label>
            <div class="layui-input-inline">
                <input type="text" name="user_id" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 60px">
            <button type="submit" class="layui-btn" lay-submit="" id="promotion_up" lay-filter="promotion_up">修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>


<script>
    layui.use(['form', 'table', 'laydate', 'layer', 'upload'], function () {
        let $ = layui.$;
        let form = layui.form;
        let table = layui.table;
        let laydate = layui.laydate;
        let layer = layui.layer;
        let dtree = layui.dtree;
        let numinput = layui.numinput;
        let upload = layui.upload;



        //执行一个 table 实例显示品牌信息
        table.render({
            elem: '#promotiondemo'
            , url: glodate.serverZuul + 'seckill_promotion/find_admin_seckill_promotion_All' //数据接口
            , toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , page: true //开启分页
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {type: 'numbers', title: '序号'}
                , {field: 'title', title: '活动标题'}
                , {field: 'start_time', title: '开始时间'}
                , {field: 'end_time', title: '结束时间'}
                , {field: 'status', title: '显示状态', templet: '#switchTpl', unresize: true}
                , {field: 'create_time', title: '创建时间'}
                , {field: 'user_id', title: '创建人'}
                , {fixed: 'right',title: '操作', align: 'center', toolbar: '#barDemo'}
            ]], id: 'promotion_tableID'
        });

        //模糊查询搜索
        $("#promotionSusuo").on('click', function () {
            active.reload();
            return false;
        });

        active = {
            reload: function () {
                table.reload('promotion_tableID', {
                    where: {
                        'title': $("#promotion_name").val()
                    }, page: {
                        curr: 1
                    }
                })
            }
        }

        //优惠卷头部监听事件
        table.on('toolbar(promotiontest)', function (obj) {
            var checkStatus = table.checkStatus('promotion_tableID');
            data = checkStatus.data;
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 1,
                        skin: 'demo-class',
                        area: ['700px', '500px'],
                        anim: 5,
                        fixed: false,
                        content: $("#promotion_add_div"), //这里content是一个普通的String
                        btn: ['关闭'],
                        yes: function (index, layero) {
                            layer.close(index);
                        }
                    });
                    return false;
                    break;
                case 'delete':
                    if (data.length == 0) {
                        layer.msg('请选者数据');
                    } else {
                        let coupon_id = [];
                        for (let i = 0; i < data.length; i++) {
                            coupon_id.push(data[i].id);
                        }
                        let ids = coupon_id.join(",");
                        console.log(ids);
                        layer.confirm("确认删除这[" + data.length + "]条数据吗？", function () {
                            $.ajax({
                                url: glodate.serverZuul + "seckill_promotion/del_admin_seckill_promotion_All",
                                method: "delete",
                                data: {"id": ids},
                                success: function (res) {
                                    console.log(res);
                                    if (res.code == 200) {
                                        layer.msg("删除成功！", {icon: 6});
                                    } else {
                                        layer.alert(res.msg, {icon: 5})
                                    }
                                }
                            })
                            active.reload();
                        });

                    }
                    break;
            };
        });


        //监听优惠卷分类关联信息侧边工具栏
        table.on('tool(promotiontest)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if (layEvent === 'del') { //删除
                layer.confirm('您确认删除[' + data.title + ']吗?', function (index) {
                    $.ajax({
                        url: glodate.serverZuul + 'seckill_promotion/del_admin_seckill_promotion_All',
                        type: "delete",
                        data: {"id": data.id},
                        dataType: "json",
                        success: function (res) {
                            console.log(res)
                            if (res.code == 200) {
                                layer.msg("删除成功", {icon: 6});
                            } else {
                                layer.msg(res.msg, {icon: 5});
                            }
                            active.reload();
                        }
                    })
                });
            } else if (layEvent === 'edit') { //编辑
                form.val('promotion_up_form',data);//回显数据框
                layer.open({
                    type: 1,
                    skin: 'demo-class',
                    area: ['500px', '400px'],
                    anim: 5,
                    fixed: false,
                    content: $('#promotion_up_div'), //这里content是一个普通的String
                    btn: ['关闭'],
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                });
                return false;
            }
        });

        //秒杀活动的添加
        form.on('submit(promotion_add)', function () {
            let data = form.val('promotion_add_form');
            data.status = data.status != null ? 1:0;
            console.log(data);
            $.ajax({
                url: glodate.serverZuul + "seckill_promotion/insert_admin_seckill_promotion_All",
                type: "post",
                dataType: "json",
                data: data,
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.msg("添加成功", {icon: 6});
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                    active.reload();
                }
            })
            return false;

        });

        //秒杀活动的修改操作
        form.on('submit(promotion_up)',function () {
            let datas = form.val('promotion_up_form');
            datas.status = datas.status != null ? 1:0;
            $.ajax({
                url:glodate.serverZuul+"seckill_promotion/up_admin_seckill_promotion_All",
                type:"put",
                data:datas,
                dataType:"json",
                success:function (res) {
                    console.log(res)
                    if(res.code == 200){
                        layer.msg("修改成功",{icon:6})
                    }else{
                        layer.msg(res.msg,{icon:5});
                    }
                }
            })
            active.reload();
            return false;
            layer.closeAll();
        })

        //秒杀活动的状态修改操作
        form.on('switch(switch_show_status)', function (obj) {
            let checked = obj.elem.checked;
            let status = checked == true ? 1 : 0;
            let data = {'status': status, 'id': this.value}
            console.log(data)
            $.ajax({
                url: glodate.serverZuul+"seckill_promotion/up_admin_seckill_promotion_All",
                type:"put",
                data: data,
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    if (res.code == 200) {
                        layer.tips("修改成功", obj.othis, {time: 1000});
                    } else {
                        layer.msg(res.msg,obj.othis, {time: 1000});
                    }
                }
            })
            return false;
        });
































        //新增时将日期直接嵌套在指定容器中
        laydate.render({
            elem: '#start_time_add'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#end_time_add'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#create_time_add'
            , type: 'datetime'
            , trigger: 'click'
        });

        //修改时将日期直接嵌套在指定容器中
        laydate.render({
            elem: '#start_time_up'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#end_time_up'
            , type: 'datetime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#create_time_up'
            , type: 'datetime'
            , trigger: 'click'
        });





    }); //layui渲染结束标签
</script>

</body>
</html>